<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>js数组之解构赋值</title>
</head>
<body>
  <ul>
    <li>可将数组中的元素依次分配给左侧声明的变量</li>
    <li>可将字符串进行解构赋值，即转化为字符数组</li>
    <li>当左侧声明的变量小于右侧数组的长度，则最后一个变量接收所有剩余的成员(仍然是数组)</li>
    <li>当左侧声明的变量大于右侧数组的长度，则左侧变量不够分配时后续变量为undefined,但可设置默认值</li>
    <li>...语法在表达式左侧则解构，放在表达式右侧则展开</li>
    <li>当只获取数组中某一成员时，左侧可使用占位形式来忽略其他成员</li>
    <li>解构也可应用于函数参数声明</li>
  </ul>
  <script>
    // 可将数组中的元素依次分配给左侧声明的变量
    const names1 = ['Miracle', 'He']
    const [firstName1, lastName1] = names1
    console.log(firstName1)       // Miracle
    console.log(lastName1)        // He
    // 可将字符串进行解构赋值，即转化为字符数组
    const [...names2] = 'Miracle'
    console.log(names2)           // ["M", "i", "r", "a", "c", "l", "e"]
    // 当左侧声明的变量小于右侧数组的长度，则最后一个变量接收所有剩余的成员(仍然是数组)
    const names3 = ['Miracle', 'He', 35, 'JS,TS,ES']
    const [firstName3, lastName3, ...rest] = names3
    console.log(firstName3)       // Miracle
    console.log(lastName3)        // He
    console.log(rest)             // [35, "JS,TS,ES"]
    // 当只获取数组中某一成员时，左侧可使用占位形式来忽略其他成员
    const [,,age] = names3
    console.log(age)              // 35
    // ...语法在表达式左侧则解构，放在表达式右侧则展开
    const user = [firstName3, lastName3, ...rest]
    console.log(user)             // ["Miracle", "He", 35, "JS,TS,ES"]
    // 当左侧声明的变量大于右侧数组的长度，则左侧变量不够分配时后续变量为undefined,但可设置默认值
    const names4 = ['Miracle']
    const [firstName4, lastName4, fullName = 'Miracle He'] = names4
    console.log(firstName4)       // Miracle
    console.log(lastName4)        // undefined
    console.log(fullName)         // Miracle He
    // 解构也可应用于函数参数声明，当函数调用时进行解构赋值
    const show = function ([name, age, skills]) {
      console.log(name, age, skills) // Miracle 35 JS,TS,ES
    }
    show(['Miracle', 35, 'JS,TS,ES'])
  </script>
</body>
</html>